'use client'

import { useState } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { LogOut, UserPlus, Edit, Trash2, Search, Check, X, Database, Download } from 'lucide-react'

interface User {
  id: string
  name: string
  role: string
  permissions: string[]
}

interface GradeReview {
  id: string
  studentName: string
  course: string
  originalGrade: number
  reviewStatus: 'pending' | 'approved' | 'rejected'
}

interface BackupRecord {
  id: string
  date: string
  size: string
  type: string
}

const users: User[] = [
  { id: '1', name: '张三', role: '教师', permissions: ['上传成绩', '查看成绩'] },
  { id: '2', name: '李四', role: '教务', permissions: ['管理用户', '复核成绩'] },
  { id: '3', name: '王五', role: '系统管理员', permissions: ['管理用户', '分配权限', '复核成绩'] },
]

const gradeReviews: GradeReview[] = [
  { id: '1', studentName: '学生A', course: '高等数学', originalGrade: 85, reviewStatus: 'pending' },
  { id: '2', studentName: '学生B', course: '大学物理', originalGrade: 72, reviewStatus: 'approved' },
  { id: '3', studentName: '学生C', course: '程序设计', originalGrade: 68, reviewStatus: 'rejected' },
]

const backupRecords: BackupRecord[] = [
  { id: '1', date: '2023-12-01 08:00', size: '1.2 GB', type: '全量备份' },
  { id: '2', date: '2023-12-02 08:00', size: '200 MB', type: '增量备份' },
  { id: '3', date: '2023-12-03 08:00', size: '150 MB', type: '增量备份' },
]

export default function AdminDashboard() {
  const [selectedUser, setSelectedUser] = useState<User | null>(null)
  const [searchTerm, setSearchTerm] = useState('')

  const filteredUsers = users.filter(user => 
    user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    user.role.toLowerCase().includes(searchTerm.toLowerCase())
  )

  const filteredGradeReviews = gradeReviews.filter(review =>
    review.studentName.toLowerCase().includes(searchTerm.toLowerCase()) ||
    review.course.toLowerCase().includes(searchTerm.toLowerCase())
  )

  const filteredBackupRecords = backupRecords.filter(record =>
    record.date.toLowerCase().includes(searchTerm.toLowerCase()) ||
    record.type.toLowerCase().includes(searchTerm.toLowerCase())
  )

  return (
    <div className="min-h-screen bg-gray-100 p-4">
      <Card className="mx-auto max-w-6xl">
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="text-xl">教务管理系统</CardTitle>
          <Button variant="outline" size="sm">
            <LogOut className="mr-2 h-4 w-4" />
            退出登录
          </Button>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="user-management">
            <TabsList className="mb-4">
              <TabsTrigger value="user-management">用户管理</TabsTrigger>
              <TabsTrigger value="grade-review">成绩复核</TabsTrigger>
              <TabsTrigger value="backup">数据备份</TabsTrigger>
            </TabsList>
            
            <TabsContent value="user-management">
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <div className="relative">
                    <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
                    <Input
                      placeholder="搜索用户..."
                      className="pl-8"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                  <Dialog>
                    <DialogTrigger asChild>
                      <Button>
                        <UserPlus className="mr-2 h-4 w-4" />
                        添加用户
                      </Button>
                    </DialogTrigger>
                    <DialogContent>
                      <DialogHeader>
                        <DialogTitle>添加新用户</DialogTitle>
                      </DialogHeader>
                      <div className="grid gap-4 py-4">
                        <div className="grid grid-cols-4 items-center gap-4">
                          <Label htmlFor="name" className="text-right">
                            姓名
                          </Label>
                          <Input id="name" className="col-span-3" />
                        </div>
                        <div className="grid grid-cols-4 items-center gap-4">
                          <Label htmlFor="role" className="text-right">
                            角色
                          </Label>
                          <Select>
                            <SelectTrigger className="col-span-3">
                              <SelectValue placeholder="选择角色" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="teacher">教师</SelectItem>
                              <SelectItem value="academic">教务</SelectItem>
                              <SelectItem value="admin">系统管理员</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <div className="flex justify-end">
                        <Button>添加用户</Button>
                      </div>
                    </DialogContent>
                  </Dialog>
                </div>

                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>姓名</TableHead>
                      <TableHead>角色</TableHead>
                      <TableHead>权限</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredUsers.map((user) => (
                      <TableRow key={user.id}>
                        <TableCell>{user.name}</TableCell>
                        <TableCell>{user.role}</TableCell>
                        <TableCell>{user.permissions.join(', ')}</TableCell>
                        <TableCell className="text-right">
                          <Button variant="ghost" size="sm" onClick={() => setSelectedUser(user)}>
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </TabsContent>
            
            <TabsContent value="grade-review">
              <div className="space-y-4">
                <div className="relative">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
                  <Input
                    placeholder="搜索学生或课程..."
                    className="pl-8"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>

                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>学生</TableHead>
                      <TableHead>课程</TableHead>
                      <TableHead>原始成绩</TableHead>
                      <TableHead>复核状态</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredGradeReviews.map((review) => (
                      <TableRow key={review.id}>
                        <TableCell>{review.studentName}</TableCell>
                        <TableCell>{review.course}</TableCell>
                        <TableCell>{review.originalGrade}</TableCell>
                        <TableCell>
                          {review.reviewStatus === 'pending' && <span className="text-yellow-500">待复核</span>}
                          {review.reviewStatus === 'approved' && <span className="text-green-500">已通过</span>}
                          {review.reviewStatus === 'rejected' && <span className="text-red-500">已驳回</span>}
                        </TableCell>
                        <TableCell className="text-right">
                          {review.reviewStatus === 'pending' && (
                            <>
                              <Button variant="ghost" size="sm">
                                <Check className="h-4 w-4 text-green-500" />
                              </Button>
                              <Button variant="ghost" size="sm">
                                <X className="h-4 w-4 text-red-500" />
                              </Button>
                            </>
                          )}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </TabsContent>

            <TabsContent value="backup">
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <div className="relative">
                    <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
                    <Input
                      placeholder="搜索备份记录..."
                      className="pl-8"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                  <Button>
                    <Database className="mr-2 h-4 w-4" />
                    创建新备份
                  </Button>
                </div>

                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>备份日期</TableHead>
                      <TableHead>大小</TableHead>
                      <TableHead>类型</TableHead>
                      <TableHead className="text-right">操作</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredBackupRecords.map((record) => (
                      <TableRow key={record.id}>
                        <TableCell>{record.date}</TableCell>
                        <TableCell>{record.size}</TableCell>
                        <TableCell>{record.type}</TableCell>
                        <TableCell className="text-right">
                          <Button variant="ghost" size="sm">
                            <Download className="h-4 w-4" />
                          </Button>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>

      {selectedUser && (
        <Dialog open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>编辑用户权限</DialogTitle>
            </DialogHeader>
            <div className="space-y-4">
              <div>
                <Label>用户名: {selectedUser.name}</Label>
              </div>
              <div>
                <Label>角色: {selectedUser.role}</Label>
              </div>
              <div className="space-y-2">
                <Label>权限:</Label>
                <div className="grid grid-cols-2 gap-2">
                  {['上传成绩', '查看成绩', '管理用户', '分配权限', '复核成绩'].map((permission) => (
                    <div key={permission} className="flex items-center space-x-2">
                      <Checkbox id={permission} checked={selectedUser.permissions.includes(permission)} />
                      <label htmlFor={permission}>{permission}</label>
                    </div>
                  ))}
                </div>
              </div>
              <div className="flex justify-end space-x-2">
                <Button variant="outline" onClick={() => setSelectedUser(null)}>取消</Button>
                <Button>保存更改</Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      )}
    </div>
  )
}

